<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品分类</el-breadcrumb-item>
        </el-breadcrumb>
         <!-- 卡片列表 -->
         <el-card>
             <el-button type="primary" @click="showAddCateDialog">添加分类</el-button>
                  <tree-table :data="cateList" :columns="columns" :selection-type="false"
                  :expand-type="false" show-index index-text="#" border :show-row-hover="false">
                  <template slot='is_true' slot-scope="scope">
                     <i class="el-icon-success" v-if="scope.row.cat_deleted==0" style="color:lightgreen"></i>
                     <i class="el-icon-error" v-else  style="color:red"></i>
                  </template>
                  <template slot='sort' slot-scope="scope">
                      <el-tag v-if="scope.row.cat_level==0">等级一</el-tag>
                        <el-tag type="success" v-else-if="scope.row.cat_level==1">等级二</el-tag>
                        <el-tag type="warning" v-else>等级三</el-tag>
                  </template>
                  <template slot='option' slot-scope="scope">
                      <el-button type="primary" icon="el-icon-edit"  size="mini" ></el-button>
             <el-button type="danger" icon="el-icon-delete"  size="mini" ></el-button>
             <el-button type="warning" icon="el-icon-setting"  size="mini"></el-button>
                  </template>
                  </tree-table>
                <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryData.pagenum"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="2"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
         </el-card>

         <!-- 添加分类对话框 -->
         <el-dialog
          title="添加分类"
          :visible.sync="addCateDialogVisible" @close="closeAddCate">
          <!-- 主体内容 -->
     <el-form ref="addCateRef" :model="addCateForm" :rules="addCateRules" label-width="100px">
        <el-form-item label="分类名称:" prop="cat_name">
          <el-input v-model="addCateForm.cat_name"></el-input>
        </el-form-item>
        <el-form-item label="父级分类:">
          <!-- v-model用来指定默认的选中 
          option：指定要渲染的数据-->
          <el-cascader
          v-model="cascaderValue"
          :options="parentCateList"
          :props="cascaderSetProps"
          @change="cascaderSelectChange" clearable></el-cascader>
        </el-form-item>
     </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="addCateDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitAddCate">确 定</el-button>
          </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
  data() {
    return {
        // 商品列表
        cateList:[],
        // 获取商品分类参数
        queryData:{
            type:[],
            pagenum:1,
            pagesize:10
        },
        total:0,
        columns: [
            {label:'分类名称',prop:'cat_name'},
            {label:'是否有效',type:'template',template:"is_true"},
            {label:'排序',type:'template',template:"sort"},
            {label:'操作',type:'template',template:"option"}
        ],
        // 控制添加分类对话框显示
        addCateDialogVisible:false,
        // 添加分类form
        addCateForm:{
          cat_name:"",
          // 父级分类id
          cat_pid:0,
          // 分类等级
          cat_level:0
        },
        addCateRules:{
          cat_name:[
            { required: true, message: '请输入分类名称', trigger: 'blur' }
          ]
        },
        // 父级分类列表
        parentCateList:[],
        // 默认选中级联项和保存之后的值
        cascaderValue:[],
        // 级联选择的配置
        cascaderSetProps:{ 
          expandTrigger: 'hover',
          label:'cat_name',
          value:'cat_id',
          checkStrictly:true
          }
    }
  },

  created() {
    this.getGoodsCate();
  },

  methods: {
    async getGoodsCate(){
        var {data:res}=await this.$axios.get('categories',{
            params:this.queryData
        })
        if(res.meta.status!=200) return this.$message.error('获取数据失败')
        this.cateList=res.data.result
        this.total=res.data.total
    },
    handleSizeChange(val){
    this.queryData.pagesize=val;
    this.getGoodsCate();
    },
    handleCurrentChange(val){
    this.queryData.pagenum=val;
    this.getGoodsCate();
    },
    // 点击显示对话框
    async showAddCateDialog(){
      const {data:res}=await this.$axios.get('categories',{
        params:{type:2}
      })
      if(res.meta.status!=200) return this.$message.error('获取数据失败')
      this.parentCateList=res.data
      this.addCateDialogVisible=true
    },
    //提交添加分类
     submitAddCate(){
      this.$refs.addCateRef.validate(async flag=>{
        if(!flag)return this.$message.error('验证失败');
        const {data:res}=await this.$axios.post('categories',this.addCateForm)
        if(res.meta.status!=201)return this.$message.error('添加失败')
        this.$message.success('添加成功')
        this.getGoodsCate()
        this.addCateDialogVisible=false
      })
    },
    // 选择级联选择器变化事件
    cascaderSelectChange(){
      if(this.cascaderValue.length>0)
      {
        this.addCateForm.cat_pid=this.cascaderValue[this.cascaderValue.length-1];
        this.addCateForm.cat_level=this.cascaderValue.length;
      }else
      {
        this.addCateForm.cat_pid=0;
        this.addCateForm.cat_level=0;

      }
      
    },
    // 关闭对话框事件
    closeAddCate(){
      this.$refs.addCateRef.resetFields()
      this.cascaderValue=[];
      this.addCateForm.cat_pid=0;
      this.addCateForm.cat_level=0;
    }
  }
};
</script>

<style scoped lang='less'>
.el-button{
  margin-bottom: 10px;
}
.el-cascader{
  width:100%
}
</style>
